<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <view class="user-item">
      <view>
        <up-avatar :src="avatar" default-url="/static/avatar.webp" size="96"></up-avatar>
      </view>
      <view @tap="userOperation">
        {{ username || '立即登录' }}
      </view>
    </view>
    <view v-if="type == 1" class="order">
      <shop-grid :list="orderGrid" :column="5"></shop-grid>
    </view>
    <shop-tabbar></shop-tabbar>
    <view class="wallet">
      <view>
        <u-icon name="rmb-circle-fill" size="81"></u-icon>
      </view>
      <view class="text">{{ wallet || '0.0' }}</view>
      <view v-if="type == 1" class="right" @tap="openCharge">
        <view>充值</view>
        <u-icon name="arrow-right" size="48"></u-icon>
      </view>
    </view>
    <view v-if="type == 2"  class="my-goods" @tap="goMyGoods">
      <view>我的商品</view>
      <u-icon name="arrow-right" size="48"></u-icon>
    </view>
    <view v-if="type == 2" class="release-goods-item" @tap="goReleaseGoods">
      <view>上架商品</view>
      <u-icon name="arrow-right" size="48"></u-icon>
    </view>
    <view v-if="type == 2" class="release-goods-item" @tap="goMyOrder">
      <view>我的订单</view>
      <u-icon name="arrow-right" size="48"></u-icon>
    </view>
    <u-popup :show="showCharge" @close="showCharge = false" @open="showCharge = true">
      <view class="charge-item">
        <view class="title">
          充值
        </view>
        <view class="amount-item">
          <view
              v-for="num in 2"
              :key="num"
              :class="{amount:true,activate:chargeNum === num}"
              @tap="chargeNum = num"

          >
            ￥{{ num * 50 }}
          </view>
        </view>
        <view>
          <u-button text="充值" type="success" @click="doCharge"></u-button>
        </view>
      </view>
    </u-popup>
    <u-action-sheet
        :actions="list"
        :closeOnClickOverlay="true"
        :closeOnClickAction="true"
        @close="show = false"
        @select="args => args.operation()"
        title="操作" :show="show"></u-action-sheet>
    <view class="glass"></view>
  </view>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";
import {useStore} from "vuex";
import type {GridItem} from "@/interfaces/grid";
import {onShow} from "@dcloudio/uni-app";
import {useChargeApi, useGetWalletApi} from "@/services/api";

const uToastRef = ref()
const store = useStore()
const show = ref<boolean>(false)
const chargeNum = ref<number>(0)
const showCharge = ref<boolean>(false)
const avatar = computed(() => store.getters["auth/getAvatar"])
const username = computed(() => store.getters["auth/getUsername"])
const isLogin = computed(() => store.getters["auth/getIsLogin"])
const wallet = computed(() => store.getters["auth/getWallet"])
const type = computed(() => store.getters["auth/getType"])
const orderGrid = ref<GridItem[]>([
  {
    name: 'bag',
    title: '待付款',
    url: '/pages/order/orderList?status=1'
  },
  {
    name: 'car',
    title: '待收货',
    url: '/pages/order/orderList?status=2'
  },
  {
    name: 'checkmark',
    title: '已完成',
    url: '/pages/order/orderList?status=3'
  },
  {
    name: 'rmb',
    title: '退款',
    url: '/pages/order/orderList?status=4'
  },
  {
    name: 'order',
    title: '全部订单',
    url: '/pages/order/orderList?status=0'
  }
])
const list = ref([
  {
    name:'退出登录',
    operation:async () => {
      await store.dispatch('auth/logout')
    }
  },
  {
    name:'我的地址',
    operation: () => {
      uni.$u.route({
        url:'/pages/mine/address'
      })
    },
    disabled: type.value == 2
  }
])
const userOperation = () => {
  if (!isLogin.value) {
    uni.$u.route({
      url: '/pages/login/login'
    })
  } else {
    show.value = true
  }
}

const doCharge = async () => {
  try {
    const {data: res} = await useChargeApi({userId: store.getters["auth/getUserId"], amount: chargeNum.value * 50})

  }finally {
    await init()
    showCharge.value = false
  }
}
const openCharge = () => {
  chargeNum.value = 0
  showCharge.value = true
}
const goReleaseGoods = () => {
  uni.$u.route({
    url: '/pages/release/release'
  })
}
const goMyGoods = () => {
  uni.$u.route({
    url: '/pages/mine/myGoods'
  })
}
const goMyOrder = () => {
  uni.$u.route({
    url: '/pages/mine/myOrder'
  })
}
const init = async () => {
  const {data: res} = await useGetWalletApi({userId: store.getters["auth/getUserId"]})
  await store.dispatch('auth/setWallet', parseFloat(res + ''))
}
onShow(() => {
  init()
})
</script>


<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    height: 300px;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #ffffff, #dd524d);
    z-index: -2;
  }

  .glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-filter: blur(100px);
    z-index: -1;
  }

  .user-item {
    display: flex;
    flex-direction: row;
    margin-top: 48px;
    padding: 24px;
    align-items: center;
    gap: 24px;
  }

  .order {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    margin: 0 12px 0 12px;
    padding: 0 12px 12px 12px;
  }

  .wallet {
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    margin: 12px 12px 0 12px;
    padding: 12px 12px 12px 24px;
    align-items: center;
    gap: 12px;
    position: relative;

    .text {
      font-size: 48rpx;
    }

    .right {
      display: flex;
      flex-direction: row;
      gap: 12px;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 12px;
    }
  }

  .charge-item {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 12px;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
    }

    .amount-item {
      display: flex;
      flex-direction: row;
      gap: 12px;

      .amount {
        padding: 12px;
        border-radius: 12px;
        border: 1px solid #999999;
      }

      .activate {
        background-color: #dd524d;
        border: 1px solid #dd524d;
      }
    }

    .charge-button {
      display: flex;

    }
  }

  .release-goods-item, .my-goods {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);;
    border-radius: 12px;
    margin: 12px;
    padding: 12px 24px;
  }
}
</style>
